<template>
  <div>
    <el-form ref="form" :model="replayForm">
      <el-input v-model="replayForm.content" type="textarea" placeholder="请输入内容"></el-input>
      <el-button :loading="buttonLoading" type="primary" @click="topComment()">评论</el-button>
    </el-form>

    <div v-for="item in commentList" :key="item.commentId">
      <div class="commentList">
        <span class="left p1">
          <img class="img1" :src="item.avatar" />
        </span>

        <span class="right p1">
          <div class="rightTop">
            <el-link class="userName" :underline="false">{{item.nickName}}</el-link>
            <!-- <span class="timeAgo">{{timeAgo(item.createTime)}}</span> -->
          </div>
          <div class="rightCenter">
            {{item.content}}
          </div>
         

          <div class="rightBottom">
            <span class="create_time">{{item.createTime}}</span>
            <el-link class="b1" :underline="false" @click="displayReplayDialog(item)" >回复1</el-link>
            <el-link class="b1" :underline="false">删除</el-link>
            
          </div>


          <div v-for="item in item.children" :key="item.commentId">
            <div class="commentList">
              <span class="left p1">
                <img class="img2" :src="item.avatar" />
              </span>

              <span class="right p1">
                <div class="rightTop">
                  <el-link class="userName" :underline="false">{{item.nickName}}</el-link>
                  <span v-if="item.toNickName" class="reply">to</span>
                  <el-link v-if="item.toNickName" class="userName"  :underline="false">{{item.toNickName}}</el-link>
                </div>
                <div class="rightCenter">
                  {{item.content}}
                </div>

                <div class="rightBottom">
                  <span class="create_time">{{item.createTime}}</span>
                  <el-link class="b1" :underline="false" @click="displayReplayDialog(item)" >回复3</el-link>
                  <el-link class="b1" :underline="false">删除</el-link>
                </div>
              </span>
            </div>
          </div>
        </span>
      </div>
    </div>



    <el-dialog :visible.sync="open">

       <el-form ref="form" :model="replayForm" label-width="80px">
        <el-form-item label="评论">
           <el-input v-model="replayForm.content" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
       </el-form>

       <div slot="footer" class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="replay()">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>

import { timeAgo } from '@/utils/axin'
import {formatTime} from '@/utils'
import {getCommentList,comment} from '@/api/comment'


  export default {
    name: "CommentList",
    props: {
      commentList: {
        type: Array,
        default: () => [],
      },
      blogInfo: {
        type: Object,
        default: {}
      }
    },
  
    data() {
      return {
        open: false,
        searchCommentParam: {
            pageNum: 1, // 当前页
            pageSize: 10, // 列表总条数
            blogId: null
        },
        replayForm : {
          toCommentId: "",
          toUserId: "",
          content: "",
          blogId: null,
          authorId: null,
          parentId: "",
          likeCount: 0
        }
      };
    },
    methods: {

      timeAgo(time) {
        return timeAgo(time)
      },
      displayReplayDialog(item) {
        this.replayForm = {
          toCommentId: "",
          toUserId: "",
          content: "",
          blogId: null,
          authorId: null,
          parentId: "",
          likeCount: 0
        }
        this.replayForm.toCommentId = item.commentId
        this.replayForm.toUserId = item.userId
        this.replayForm.blogId = this.blogInfo.blogId
        this.replayForm.authorId = this.blogInfo.userId
        if (item.parentId == 0) {
          this.replayForm.parentId = item.commentId
        } else {
          this.replayForm.parentId = item.parentId
        }
        this.replayForm.likeCount = 0

        this.open = true
      },
      topComment() {
       
         this.replayForm.parentId = 0
         this.replayForm.blogId = this.blogInfo.blogId
         this.replayForm.authorId = this.blogInfo.userId

        comment(this.replayForm).then(response => {
          this.searchCommentParam.blogId = this.blogInfo.blogId
            getCommentList(this.searchCommentParam).then(response => {
                this.commentList = response.rows;
                this.total = response.total
            })
          this.cancel();
        });
      },
      replay() {
        comment(this.replayForm).then(response => {
          this.searchCommentParam.blogId = this.blogInfo.blogId
            getCommentList(this.searchCommentParam).then(response => {
                this.commentList = response.rows;
                this.total = response.total
            })
          this.cancel();
        });
      },
      cancel() {
        this.replayForm = {
          toCommentId: "",
          toUserId: "",
          content: "",
          blogId: null,
          authorId: null,
          parentId: "",
          likeCount: 0
        }
        this.open = false
      }
    },
    created() {
    },
    components: {
      
    },
    mounted() {

    },
    compute: {},
  };
</script>

<style scoped lang="scss">
  @import "CommentList";
</style>
